<!--
  @author:  long
  @date:    2023/3/7
  @file:    相关附件
  @require:
-->
<template>
  <div>
    <div class="flex items-center justify-between">
      <!--      <div class="text-gray-600 text-sm">-->
      <!--        <i class="i-bi-bookmarks-fill"></i>-->
      <!--        相关附件-->
      <!--      </div>-->
      <TitleName title="相关附件" icon="i-carbon-bookmark-filled"></TitleName>
      <div>
        <el-button type="primary" icon="Plus" size="small">添加</el-button>
        <el-button type="primary" icon="Download" size="small">下载</el-button>
        <el-button type="primary" icon="Delete" size="small" @click="handleDel"
          >删除</el-button
        >
      </div>
    </div>
    <el-table
      class="mt-2"
      ref="multipleTableRef"
      :data="tableData"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        header-align="center"
        align="center"
        type="selection"
        width="55"
      />
      <el-table-column
        header-align="center"
        align="center"
        prop="name"
        label="附件名称"
      >
      </el-table-column>
      <el-table-column
        header-align="center"
        align="center"
        prop="phone"
        label="附件格式"
      />
      <el-table-column
        header-align="center"
        align="center"
        prop="role"
        label="文件大小"
      />
      <el-table-column
        header-align="center"
        align="center"
        prop="zw"
        label="上传时间"
      />
      <el-table-column
        header-align="center"
        align="center"
        prop="sr"
        label="上传人员"
      />
      <el-table-column
        header-align="center"
        align="center"
        prop="sr"
        label="备注"
      />
      <el-table-column
        header-align="center"
        align="center"
        width="200"
        label="操作"
      >
        <template #default>
          <el-button link type="primary" size="small" icon="View"
            >预览</el-button
          >
          <el-button link type="primary" size="small" icon="Download"
            >下载</el-button
          >
          <el-button link type="primary" size="small" icon="Delete"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script setup name="CustomerAccessories">
import { getCurrentInstance } from 'vue'

const { proxy } = getCurrentInstance()
const data = reactive({
  queryParams: {},
  tableData: [{ name: '1', phone: '2', role: '3', zw: '4', sr: '5' }],
  total: 10,
  selectionData: []
})
const { queryParams, tableData, total, selectionData } = toRefs(data)

/**
 * 获取列表数据
 */
function getList() {}

/**
 * 表格多选
 */
function handleSelectionChange(data) {
  selectionData.value = data
  console.info(selectionData.value)
}

/**
 * 删除方法
 */
function handleDel() {
  if (!selectionData.value.length) {
    proxy.$modal.msgWarning('请选择要删除的数据')
    return
  }
  proxy
    .$confirm('确认删除选中记录吗？', '提示', {
      type: 'warning'
    })
    .then(() => {})
}
</script>

<style scoped lang="scss"></style>
